<template>
    <div>
      <!-- 环形图3 -->
      <div id="huan3" style="width: 370px; height: 360px"></div>
    </div>
  </template>
    
    <script setup lang="ts">
  import { ref, onMounted, onUnmounted } from "vue";
  import * as echarts from "echarts";
  
  function initChart() {
    var chartDom = document.getElementById("huan3");
    var myChart = echarts.init(chartDom);
  
    myChart.setOption({
      title: {
        text: "居民性别构成",
      },
      tooltip: {
          trigger: "item",
      },
      // 图例
      legend: {
        // show:false
        //   top: "5%",
        orient: "horizontal",
        left: "center",
        icon: "circle", //图例的形状
        x: "center",
        y: "bottom",
        itemGap: 20, //数据上下的距离
      },
      //中间显示字，有偏移量
      graphic: [
        {
          //环形图中间添加文字
          type: "text", //通过不同top值可以设置上下显示
          left: "center",
          top: "50%",
          style: {
            text: "1000", //（自己设置显示内容）,
            textAlign: "center",
            fill: "#000", //文字的颜色
            width: 30,
            height: 30,
            fontSize: 20,
            color: "#4d4f5c",
            fontFamily: "Microsoft YaHei",
  
          },
        },
        {
          type: "text",
          left: "center",
          top: "45%",
          style: {
            text: "居民总数",
            textAlign: "center",
            fill: "#000",
            width: 30,
            height: 30,
            fontSize: 20,
          },
        },
      ],
  
      series: [
        {
          name: "居民学历构成",
          type: "pie",
          radius: ["40%", "60%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          labelLine: {
            show: false,
          },
  
          data: [
            { value: 600, name: "男" },
            { value: 400, name: "女" },
          ],
        },
      ],
    });
    myChart.resize();
    window.onresize = function () {
      console.log("窗口尺寸发生变化");
      //自适应大小
      myChart.resize();
    };
  }
  
  onMounted(() => {
    setTimeout(() => {
      initChart();
    }, 0);
  });
  
  onUnmounted(() => {
    echarts.dispose;
  });
  </script>
    
    <style lang="scss" scoped>
  </style>